// Home.js
import React, { useEffect, useRef } from 'react';
import { Input } from 'antd';
import { useInputHooks } from '../utils/Input';
import { useHeight } from '../utils/useHeight';
import { AboutWrapper } from './styled'
const About = () => {
  const { value, onChange, flag } = useInputHooks('初始值');
  useEffect(() => {
    if (flag) {
      console.log('flag', flag);
    }
  }, [flag]);
  const refDiv = useRef();
  const { height } = useHeight(refDiv);
  return (
    <>
      <h2>About {value}</h2>
      <Input value={value} onChange={onChange} />
      <AboutWrapper ref={refDiv}>
        <p style={{ height: height - 20 + 'px' }}>p:{height}</p>
      </AboutWrapper>
    </>
  )
};

export default About;